<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>蛋糕店</title>
    <style>
       
        #box{
            border: 1px solid black;
            /*width: 600px;*/
            display: flex;
            justify-content: space-between;
            background-color: seashell;
        }
        #box:hover{
            background-color: lightgrey;
        }

        .item-one{
            /*border: 1px solid red;*/
            height: 100%;         
            flex-grow: 0;
        }
        .item-two{
            /*border: 1px solid red;*/
            height: 100%;
            flex-grow:1;  
            margin-right: 20px;
        }
        img{
            width: 120px;
            height: 120px;
            align-self: center;
            margin: 20px;
        }
        #container{
           margin-top: 20px;
           display: flex;
           line-height: 30px;
        }
        #brand{
            width: 40px;
            text-align: center;
            flex-grow: 1;
            /*border: 1px solid green;*/
            background-color: yellowgreen;
            border-radius: 10%;
        }
        #name{
           font-weight:700;
           font-size: 25px;
           flex-grow: 12;
           /*border: 1px solid tomato;*/
           text-indent: 0.5em;
        }
        #buy{
            flex-grow: 1.5;
            /*border: 1px solid tomato;*/
            text-align: center;
        }
        #star{
            /*border: 1px solid palegreen;*/
            margin: 0;    
            display: flex;
            
        }
        #evaluate{
            display: flex;
            line-height: 25px;
        }
       #star img{
            width: 20px;
            height: 20px;
            margin: 0;
        }
        .item{
           /*border: 1px solid olivedrab;*/
        }
         #punctuality,#mango{
           color: skyblue;
        }
        .item:nth-of-type(1){
            flex-grow:1;
            text-align: center;
        }
        .item:nth-of-type(2){
            flex-grow:1;
            text-align: center;
        }
        .item:nth-of-type(3){
            flex-grow:15;
            text-align: center;
        }
        .item:nth-of-type(4){
            flex-grow: 2;
            text-align: center;
        }
        .item:nth-of-type(5){
            flex-grow: 1;
            text-align: center;
        }
        #send{
            display: flex;
            line-height: 25px;
        }
        .give{
            /*border: 1px solid firebrick;*/
        }
        .give:nth-of-type(1){
            flex-grow: 20;
        }
        .give:nth-of-type(2){
            flex-grow: 1;
            text-align: center;
        }
        .give:nth-of-type(3){
            flex-grow: 1;
            text-align: center;
            color: blue;
        }
        #user{
            display: flex;
            line-height: 26px;
        }
        .new{
            /*border: 1px solid firebrick;*/
        }
        .new:nth-of-type(1){
            flex-grow: 1;
            text-align: center;
            background-color: green;
        }
        .new:nth-of-type(2){
            flex-grow: 20;
            text-align: center;
        }
        .new:nth-of-type(3){
            flex-grow: 2;
            text-align: center;
        }
         #activity{
            display: flex;
            line-height: 30px;
        }
        .full:nth-of-type(1){
            flex-grow: 1;
            text-align: center;
            background-color: yellow;
        }
        .full:nth-of-type(2){
            flex-grow: 30;
           
        }
       
       


    </style>
</head>
<body>
    <div id="box">
        <div class="item-one">
            <img src="dg.jpg" alt="">
        </div>
        <div class="item-two">
            <div id="container">
                <div id="brand" >品牌</div>
                <div id="name" >爱尚海</div>
                <div id="buy" >保 票 准</div>
            </div>
            <div id="evaluate">
                <div id="star" class="item">
                    <img src="xin.png" >
                    <img src="xin.png" >
                    <img src="xin.png" >
                    <img src="xin.png" >
                    <img src="xin.png" >
                </div>   
                <div id="grade" class="item">4.6</div>
                <div id="sales" class="item">月销售20000</div>
                <div id="punctuality" class="item">准时达</div>
                <div id="mango" class="item">蜂鸟专送</div>
             </div>
             <div id="send">
                <div class="give">￥20元起送/配送费￥5/￥26、人</div>
                <div class="give">1.92/</div>
                <div class="give">27分钟</div>
            </div>
            <div id="user">
                <div class="new">新</div>
                <div class="new">新用户立减17.0元</div>
                <div class="new">5个活动</div>
            </div>
            <div id="activity">
                <div class="full">满</div>
                <div class="full">满100立减30</div>
            </div>
            
        </div>
    </div>
</body>
</html>